// ./src/components/elements/DevSubscribers.js
import React from 'react';
import { Typography } from '@mui/material';

// eslint-disable-next-line no-unused-vars
export const KickstartBenefits = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Kickstart your developer benefits
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const LatestFeatures = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Access to our latest features
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const ReactGraphs = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Supercharged React force graphs
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const RechartsAnalysis = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Analyze Recharts data in realtime
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const NodeTracing = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Lightning fast node span tracing
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const SharedNotifications = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Quick view shared notifications
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const EnergizeSales = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Energize your sales team today
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const UptimeMonitoring = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Uptime monitoring for your page
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const Support247 = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Groundbreaking 24/7 support
  </Typography>
);

// eslint-disable-next-line no-unused-vars
export const DeveloperSubscription = ({ darkMode, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => (
  <Typography 
    sx={largeHeaderSx}
  >
    Get your developer subscription
  </Typography>
);